// 全局样式
export const globalStyles = `
html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  list-style: none;
  height: inherit;
  width: inherit;
}

#app {
  height: inherit;
  width: inherit;
  display: flex;
}
`;

import {theme} from "./components/common/theme.js";

// 主题变量和通用样式
export const themeStyles = `
:root {
  --primary-color: #1890ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
  --text-color: ${theme.tc};
  --text-color-secondary: #00000073;
  --border-color: #d9d9d9;
  --background-color: ${theme.bgc};
  --hover-color: #f5f5f5;
  --sidebar-width: ${theme.leftMenuWidth};
  --top-height: ${theme.topHeight};
  --menu-font-size: ${theme.menuFontSize};
  --top-margin-bottom: ${theme.topMarginBottom};

  /* Shoelace CSS 变量定义 */
  --sl-color-primary-50: #eff6ff;
  --sl-color-primary-100: #dbeafe;
  --sl-color-primary-200: #bfdbfe;
  --sl-color-primary-300: #93c5fd;
  --sl-color-primary-400: #60a5fa;
  --sl-color-primary-500: #3b82f6;
  --sl-color-primary-600: #2563eb;
  --sl-color-primary-700: #1d4ed8;
  --sl-color-primary-800: #1e40af;
  --sl-color-primary-900: #1e3a8a;
  --sl-color-primary-950: #172554;

  --sl-color-success-50: #f0fdf4;
  --sl-color-success-100: #dcfce7;
  --sl-color-success-200: #bbf7d0;
  --sl-color-success-300: #86efac;
  --sl-color-success-400: #4ade80;
  --sl-color-success-500: #22c55e;
  --sl-color-success-600: #16a34a;
  --sl-color-success-700: #15803d;
  --sl-color-success-800: #166534;
  --sl-color-success-900: #14532d;
  --sl-color-success-950: #052e16;

  --sl-color-warning-50: #fffbeb;
  --sl-color-warning-100: #fef3c7;
  --sl-color-warning-200: #fde68a;
  --sl-color-warning-300: #fcd34d;
  --sl-color-warning-400: #fbbf24;
  --sl-color-warning-500: #f59e0b;
  --sl-color-warning-600: #d97706;
  --sl-color-warning-700: #b45309;
  --sl-color-warning-800: #92400e;
  --sl-color-warning-900: #78350f;
  --sl-color-warning-950: #451a03;

  --sl-color-danger-50: #fef2f2;
  --sl-color-danger-100: #fee2e2;
  --sl-color-danger-200: #fecaca;
  --sl-color-danger-300: #fca5a5;
  --sl-color-danger-400: #f87171;
  --sl-color-danger-500: #ef4444;
  --sl-color-danger-600: #dc2626;
  --sl-color-danger-700: #b91c1c;
  --sl-color-danger-800: #991b1b;
  --sl-color-danger-900: #7f1d1d;
  --sl-color-danger-950: #450a0a;

  --sl-color-neutral-0: #ffffff;
  --sl-color-neutral-50: #f8fafc;
  --sl-color-neutral-100: #f1f5f9;
  --sl-color-neutral-200: #e2e8f0;
  --sl-color-neutral-300: #cbd5e1;
  --sl-color-neutral-400: #94a3b8;
  --sl-color-neutral-500: #64748b;
  --sl-color-neutral-600: #475569;
  --sl-color-neutral-700: #334155;
  --sl-color-neutral-800: #1e293b;
  --sl-color-neutral-900: #0f172a;
  --sl-color-neutral-950: #020617;

  /* Shoelace 组件默认样式 */
  --sl-panel-background-color: var(--sl-color-neutral-0);
  --sl-panel-border-color: var(--sl-color-neutral-200);
  --sl-panel-border-width: 1px;

  --sl-input-background-color: var(--sl-color-neutral-0);
  --sl-input-border-color: var(--sl-color-neutral-300);
  --sl-input-border-width: 1px;
  --sl-input-border-radius-medium: 6px;
  --sl-input-height-medium: 40px;

  --sl-button-border-radius-medium: 6px;
  --sl-button-height-medium: 40px;
  --sl-button-font-size-medium: 14px;

  --sl-border-radius-medium: 6px;
}
`;

// 应用全局样式的函数
export function applyGlobalStyles() {
  const style = document.createElement('style');
  style.textContent = globalStyles + themeStyles;
  document.head.appendChild(style);
}